<template>
	<!-- 医生列表 -->
	<view v-if="doctorLists.length" >
		<view class="flex" v-for="(item, index) in doctorLists" :key="item.id">
			<view class="doc_card" @click="handleGodetail(item)">
				<!-- 医生头像 -->
				<image :src="item.image ?item.image:'../static/img/user.png'" mode=""></image>
				<!-- 医生信息 -->
				<view class="doc_card_right">
					<!-- 医生名称 -->
					<view class="doc_card_right_v">
						<text class="name">{{ item.name }}</text>
						<text class="major">{{ item.professionalTitle + '·'+item.department }}</text>
					</view>
					<!-- 医院 -->
					<view class="doc_card_right_v">
						<u-tag v-if="item.level" size="mini" :text="item.level" plain shape="square" color="#FFFFFF" bgColor="#00B4C7"
							border-color="#00B4C7"></u-tag>
						<text class="hospital">{{item.hospital}}</text>
					</view>
					<!-- 坐诊时间 -->
					<view v-if="item.settingTimeStart" class="doc_card_right_v ">
						<text class="desc"><text>坐诊时间：</text>{{ item.settingTimeStart}}</text>
					</view>
					<!-- 擅长 -->
					<view v-if="item.specialty" class="doc_card_right_v ">
						
						<text class="desc line2"><text>擅长：</text>{{ item.specialty }}</text>
					</view>
					<!-- 简介 -->
					<view class="doc_card_right_v ">
						
						<text class="desc line2"><text>简介：</text>{{ item.details }}</text>
					</view>
					
					<!-- 拜师按钮 -->
					<u-modal :show="showModel" :title="title" @confirm.native.stop="confirm" showCancelButton="true"
						@cancel="showModel = false" confirmColor="#00B4C7" cancelColor="#999" ref="uModal">
						<view class="slot-content">
							{{ content }}
						</view>
					</u-modal>
					<view class="doc_card_btn">
						<view @click.native.stop="submit(item)" class="btn btn_default">
							拜师
						</view>
						<view v-if="ylUserInfo.type == '1'"  class="btn btn_primary" style="margin-left: 30rpx;"
						@click="toPage(`/pagesA/orders/addOrder?userInfo=${JSON.stringify(item)}`)">
							预约
						</view>
					</view>

				</view>
			</view>

		</view>
	</view>
	<view v-else class="empty_box" style="margin: 200rpx 0 0;">
		<image src="/static/img/empty.png" mode=""></image>
		<text>暂无数据</text>
	</view>
</template>

<script>
	import {
		getDoctorListApi,
		apprenticeshipApi
	} from '../common/API/doctorApi.js'
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState('user', ['ylUserInfo'])
		},
		data() {
			return {
				title: '确定拜师',
				showModel: false,
				content: '',
				doctorLists: [],
				doctorCode: '',
				total: 0,
				pageNum: 1
			}
		},
		methods: {
			changeDoctorLists(array){
				this.doctorLists = array
			},
			submit(item) {
				this.showModel = true
				this.doctorCode = item.doctorCode
				this.content = `确定拜${item.name}为师吗`
			},
			// 确认拜师
			async confirm() {
				this.showModel = false;
				let res = await apprenticeshipApi(this.doctorCode, this.ylUserInfo.username, this.ylUserInfo.nickName)
				if (res.status == 200) {
					uni.showToast({
						title: "拜师成功"
					}, 1500)
				}
			},
			// 详情
			handleGodetail(item) {
				let doctorObj = JSON.stringify(item)
				uni.navigateTo({
					url: `/pagesA/doctorDetail/doctorDetail?doctorObj=${doctorObj}`
				})
			},
			// async getDoctorList() {
			// 	let res = await getDoctorListApi({
			// 		pageNum: this.pageNum,
			// 		pageSize: 10
			// 	})
			// 	if (res.status == 200) {
			// 		this.doctorLists = this.doctorLists.concat(res.data.records)
			// 		this.total = res.data.total
			// 	}
			// }

		},
		created() {
			// this.getDoctorList()
		},

	}
</script>

<style lang="scss" scoped>
	.doc_card {
		width: 686rpx;
		// height: 280rpx;
		margin: 16rpx 32rpx 16rpx 32rpx;
		background-color: #FFFFFF;
		border-radius: 16rpx;
		padding: 32rpx;
		display: flex;
		justify-content: space-between;

		image {
			width: 112rpx;
			height: 112rpx;
			border: 2rpx solid #00B4C7;
			border-radius: 100rpx;
		}

		.doc_card_right {
			width: 480rpx;
			display: flex;
			flex-direction: column;
			.doc_card_right_v {
				display: flex;
				justify-content: space-between;
				margin: 0rpx 0 16rpx 0;

				.name {
					font-weight: 500;
					font-size: 34rpx;
				}

				.major {
					margin-right: 150rpx;
					font-weight: 400;
					font-size: 28rpx;
					font-family: PingFangSC;
					padding-top: 5rpx;
				}

				.hospital {
					margin-right: 50rpx;
					font-weight: 400;
					font-size: 28rpx;
					font-family: PingFangSC;
					padding-top: 5rpx;
				}

				.desc {
					font-family: PingFangSC;
					color: #999999;
					font-weight: 400;
					font-size: 28rpx;
					font-style: normal;
					text-decoration: none;
					text-align: left;
					text{
						font-weight: 700;
						font-size: 28rpx;
					}
				}
			}

			.slot-content {
				color: #999;
				font-size: 28rpx;
			}
		}

		.doc_card_btn {
			display: flex;
			justify-content: flex-end;
			.btn{
				padding: 10rpx 30rpx;
			}
		}
	}
</style>